@import "../../variables.scss";

.header.nav-head {
  min-height: $header-height;
  line-height: $header-height;
  background-color: white !important;
  z-index: 2;
  font-size: 14px;
  box-shadow: 0 0 24px rgba(153, 153, 153, 0.5);
  border-radius: 0;
  border: none;

  .logo {
    float: left;
    height: $header-height;
    width: 173px;
    background-color: $blue;
    color: white !important;
    text-decoration: none;
    font-size: 24px;
    line-height: $header-height;
    padding: 0 20px;

    img {
      width: 24px;
      float: right;
      margin-top: 20px;
    }
    &:hover, &.active, &:focus {
      background-color: $blue !important;
    }
  }
  .nav-group {
    padding-top: 10px;
    li a {
      color: $gray-dark !important;
      &.active, &:hover, &:focus {
        color: $blue !important;
        background-color: transparent;
        outline: none;
      }
    }
  }

  .nav-group-right {
    height: $header-height;
    li a {
      color: $gray-dark !important;
      line-height: $header-height/2 + 5px;
      &.active, &:hover, &:focus {
        color: $blue !important;
        background-color: transparent;
        outline: none;
      }
    }
  }

  .user-pic {
    margin-top: -5px;
    margin-right: 10px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 0 0 24px rgba(153, 153, 153, 0.3);
  }
}